<!-- 使用此组件需要传入方法，此popup的隐藏方法。以及iac对象 -->
<template>
	
	<view  class="play-view-container" >
		<!-- <view class="bg-mask"></view> -->
		<view :style="backGround" style="position: absolute; width: 100%; height: 100%;">
			
		</view>
		<view style="height: 100%; opacity: .9; background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.4),rgba(0,0,0,.1));">
		<view class="playView-container">
			  <view style="display: flex;">
				  <!-- 调用父组件的方法 -->
				  <i class="icon-fanhui1 iconfont back" @click="hideView"></i>
				  <view style="margin-left: 30rpx;">
					  <p style="font-size: 36rpx;">{{nowSong.title}}</p>
					  <p style="font-size: 30rpx;">{{nowSong.author}}</p>
				  </view>
			  </view>
			  <view>
				  <i class="icon-fenxiang iconfont share" @click="share"></i>
			  </view>
		  </view>
		<!-- 中间界面-动画特效处 -->
		
		<view class="mid-container" @click.prevent="flag = !flag">
			<!-- 图片转动特效 -->
			<image  v-if="flag" src="../../static/123.png" mode="" :class="['zz',nowSong.playState?'zz-play':'']"></image>
			<transition>
				<view class="cover-box" v-if="flag">
					<image  mode="scaleToFill" src="../../static/play_image.png" :class="[nowSong.playState? '':'pause', 'play']"></image>
					<!-- <image class="cover-img" :src="nowSong.image" :class="[nowSong.playState? '':'pause', 'play']"></image> -->
					<div class="cover-img">
						<xiex-image :src="nowSong.image" :class="[nowSong.playState? '':'pause', 'play']"></xiex-image>
					</div>
				</view>
			</transition>
			<!-- 通过flag控制，通过css3实现淡入淡出效果， 歌词界面 -->
			<view v-if="!flag">
				<!-- <p v-for="item in lyric">{{item.lrc}}</p> -->
				<lyr-view :lyrics="lyric" :curTime="nowTime2" @move="move3"></lyr-view>
			</view>
			
		</view>
	
		<!-- 底部控制 -->
		<view class="bottom-controll">
			<!-- 喜欢 下载等 -->
				<view class="like-download">
					<i class="iconfont icon-xihuan"></i>
					<i class="iconfont icon-xihuan"></i>
					<i class="iconfont icon-xihuan"></i>
					<i class="iconfont icon-pinlun" @click="goComment"></i>
					<i class="iconfont icon-gengduo"></i>
				</view>
				<!-- 进度条 --> 
				<view class="progress" @click="move2">
					<cmd-progress :percent="percent" stroke-color="#ccc" :show-info="false"></cmd-progress>
					<p class="left">{{nowTime2 | timeSort}}</p>
					<p class="right">{{allTime | timeSort}}</p>
					<p style="display: none;">{{nowTime}}</p>
				</view>
				<!-- 播放控制 -->
				<view class="play-controll">
					<i :class="[nextPlay.flag?'icon-xunhuan':'icon-forward', 'iconfont']" @click="nextPlayListStateChange"></i>
					<i class="icon-shangyishou iconfont"></i>
					<i :class="['iconfont', nowSong.playState? 'icon-zanting':'icon-icon-2']" @click="pulse"></i>
					<i class="icon-xiayishou iconfont"></i>
					<!-- 列表 -->
					<i class="icon-caidan iconfont" @click.stop = "showNextPlayList=!showNextPlayList"></i>
					<transition>
						<scroll-view class="next-play-list" v-if="showNextPlayList" :scroll-y="true">
							<view class="next-play-list-title" @click="nextPlayListStateChange">{{nextPlay.flag?'单曲循环':'列表循环'}}</view>
							<view class="next-play-list-item" v-for="(item,index) in nextPlay.list" :key="index">
								<view style="display: flex;">
									<p style=" margin-right: 30rpx;line-height: 80rpx;">{{index<10?'0'+(index+1):(index+1)}}</p>
									<view style="display: flex; flex-direction: column; margin-top: 8rpx;">
										<p>{{item.title}}</p>
										<p>{{item.author}}</p>
									</view>
								</view>
								<i class="icon-close iconfont" style="font-size: 35rpx; line-height: 80rpx; margin-right: 20rpx;"></i>
							</view>
						</scroll-view>
					</transition>
				</view>
			</view>
	</view>
		</view>
</template>

<script>
	import lyrView from '../bing-lyric/bing-lyric.vue'
	export default {
		data() {
			return {
				nowTime2: 0,
				allTime: 0,
				percent: 0,
				progress:null,
				flag: true,
				lyric: [],
				buffered: 0,
				showNextPlayList: false,
				
			};
		},
		props: ['iac'],
		components: {
			lyrView
		},
		computed: {
			nowSong(){
				this.getLyric()
				return this.$store.state.song
			},
			nowTime(){
				setInterval(()=>{
					this.nowTime2 = this.iac.currentTime
					this.allTime = this.iac.duration
					this.percent = this.nowTime2/this.allTime*100
					this.buffered = this.iac.buffered
				}, 100)
				return 0
			},
			backGround(){
				// console.log( this.$store.state.song.image)
				return {
					background: 'linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.2),rgba(255,255,255,.9)),no-repeat,url('+this.$store.getters.songData.image+')',
					// backGroundImage: this.$store.getters.songData.image,
					// backgroundSize:'100% 100%',
					// backgroundRepeat:'cover',
					filter: 'blur(15px)',
					opacity: .6
					// backgroundPosition:'center'
				}
			},
			nextPlay(){
				return this.$store.getters.nextPlayData
			}
		},
		created() {
			// console.log(this.nextPlay)
			this.getLyric()
		},
		methods: {
			hideView(){
				this.$emit('hidePlayView')
			},
			// 点击了分享按钮
			share(){
				console.log('点击了share')
			},
			// 组件内部控制，需要传入iac
			pulse(){
				this.nowSong.playState = !this.nowSong.playState
				this.$store.commit('songChange', this.nowSong)
				if(this.nowSong.playState)return this.iac.play()
				this.iac.pause()	
			},
			move2(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('.progress').boundingClientRect(data => {
					this.nowTime2 = (e.detail.x - data.left)/(data.right - data.left)*this.allTime
					this.percent = this.nowTime2/this.allTime*100
					this.iac.seek(this.nowTime2)
				}).exec();
			},
			move3(data){
				// console.log(this.nowTime2,data)
				if(Math.abs(data-this.nowTime2)<=5)return 
				this.nowTime2 = data
				this.iac.seek(this.nowTime2)
			},
			// 获取歌词
			getLyric(){
				uni.request({
					url: 'http://localhost:3000/lyric?id='+ this.$store.getters.songData.id,
					success: (res)=>{
						this.lyric = res.data.lrc.lyric.split(/\n/)
					}
				})
			},
			nextPlayListStateChange(){
				this.nextPlay.flag = !this.nextPlay.flag
				this.submitNextPlayList()
			},
			submitNextPlayList(){
				this.$store.commit('nextPlayListChange',this.nextPlay)
			},
			goComment(){
				uni.navigateTo({
					url: '../../pages/playView/comment',
					animationType: 'slide-in-top'
				})
			}
		}
		
	}
</script>

<style lang="less">
	.play-view-container{
		height: 100%;
	}
	.bg-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: hsla(0,0,100%,.5);
	}
	.playView-container {
		// height: 100%;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		.back {
			font-size: 40rpx;
			padding: 10rpx;
			line-height: 70rpx;
			
		}
		// .back:hover, .share:hover {
		// 	border: 1px solid #eee;
		// 	border-radius: 50%;
		// 	background-color: #eee;
		// }
		.share {
			font-size: 50rpx; line-height: 68rpx;			padding: 10rpx;
		}
	}
	.mid-container {
		overflow: hidden;
		position: relative;
		// margin-top: 40rpx;
		height: 70%;
		width: 100%;
		// background-color: pink;
		.cover-box {
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -260rpx 0 0 -260rpx;
			height: 540rpx;
			width: 540rpx;
			border-radius: 50%;
			// border: 3px solid #eee;
			// background-color: yellow;
			overflow: hidden;
			image {
				height: 100%;
				width: 100%;
				transition: all linear 1s;
			}
			
			.play {
				animation: xuanZhuan 20s linear infinite;
			}
			.pause {
				animation-play-state: paused;
			}
			.cover-img {
				position: absolute;
				left: 142rpx;
				top: 150rpx;
				z-index: 6;
				width: 262.5rpx;
				height: 262.5rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			
			
		}
		.zz {
			width: 200rpx;
			height: 380rpx;
			position: absolute;
			left: 50%;
			top: 10%;
			margin-left: -50rpx;
			z-index: 1;
			transform: rotateZ(-30deg);
			transform-origin: top center;
			transition: all linear .5s
		}
		.zz-play {
			transform: rotateZ(-6deg);
		}
		
	}
	
	// 底部
	.bottom-controll {
		position: absolute;
		bottom: 0;
		width: 100%;
		// margin-top: 20rpx;
		// display: flex;
		// flex-direction: column;
		// justify-content:space-evenly;
		// height: 306rpx;
		.like-download {
			padding: 0 70rpx;
			display: flex;
			justify-content: space-between;
			.iconfont {
				font-size: 40rpx;
			}
		}
		.progress {
			position: relative;
			margin: 30rpx auto;
			width: 80%;
			font-size: 20rpx;
			.left {position: absolute; left: -57rpx; top: 6rpx}
			.right {position: absolute; right: -57rpx; top: 6rpx}
		}
		.play-controll {
			position: relative;
			display: flex;
			height: 100rpx;
			padding: 0 70rpx;
			justify-content: space-between;
			z-index: 3;
			.iconfont {font-size: 60rpx;}
			.next-play-list {
				position: absolute;
				right: 124rpx;
				bottom: 80rpx;
				height: 400rpx;
				width: 500rpx;
				border-radius: 10rpx;
				background: linear-gradient(rgba(174, 166, 142),rgba(255,255,255,.7),rgba(174, 166, 142));
				// background-color: pink;
				.next-play-list-title {
					padding-left: 20rpx;
					height: 80rpx;
					font-size: 35rpx;
					line-height: 80rpx;
					border-bottom: 1rpx solid #ccc;
				}
				.next-play-list-item {
					display: flex;
					justify-content: space-between;
					padding-left: 20rpx;
					height: 80rpx;
					font-size: 20rpx;
					border-bottom: 1rpx solid #ccc;
				}
			}
		}
		
	}
	@keyframes xuanZhuan {
	            0% {}
	
	
	            100% {
	              transform: rotate(360deg);
	            }
	        }
	.v-enter-active, .v-leave-active {
	      transition: all .5s
	}
	.v-enter, .v-leave-active {
	      opacity: 0
	}
</style>
